<template>
    <div>
        <div class="flex mt18 tlc mb20">
            <div class="flex1">灾难时间段：2020-07-21 15:00-17:00</div>
            <div class="flex1">预警时间段：2020-07-21 15:00-17:00</div>
            <div class="flex1">类型：暴雨</div>
            <div class="flex1">地区：北京-丰台区-南京路</div>
            <div class="flex1">预警车辆数：234</div>
            <div class="flex1">避险车辆数：123</div>
        </div>
        <el-table class="sd" stripe border :data="tableData" v-loading="loading">
            <el-table-column align="center" prop="index" label="序号" width="100"></el-table-column>
            <el-table-column align="center" prop="name" label="主机厂"></el-table-column>
            <el-table-column align="center" prop="vCode" label="车辆VIN码"></el-table-column>
            <el-table-column align="center" prop="carModel" label="车辆型号"></el-table-column>
            <el-table-column align="center" prop="type" label="通知类型"></el-table-column>
            <el-table-column align="center" prop="time" label="通知时间"></el-table-column>
            <el-table-column align="center" prop="isAccess" label="是否访问"></el-table-column>
            <el-table-column align="center" prop="result" label="避灾情况"></el-table-column>
        </el-table>
        <el-pagination class="tpl-mg-t mt20 fr"
                        small
                        @size-change="pageSizeChange"
                        @current-change="pageCurrentChange"
                        :current-page="queryForm.pageNum"
                        :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="queryForm.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        style="margin-bottom: 5px">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: 'hedgingAreaDetail',
        data () {
            return {
                // 列表查询条件
                queryForm: {
                    brand: '',
                    activityTitle: '',
                    activityStatus: '',
                    activityId: '',
                    pageNum: 1,
                    pageSize: 10
                },
                // total: 0,
                tableData: [],
                userData: {},
                loading: false
            }
        },
        created () {
            this.queryList();
        },
        computed: {
            total() {
                return this.tableData.length;
            }
        },
        methods: {
            // 点击查询置为第一页
            queryList1 () {
                this.queryForm.pageNum = 1
                this.queryList()
            },
            // 查询列表
            queryList () {
                let cData = [];
                cData = [
                    {"index": "1","name": "吉利汽车","vCode": "LVSHJCAL8FE384344","carModel": "缤越","type": "短信","time": "2020-7-21 17:12:29","isAccess": "是","result": "成功"},
                    {"index": "2","name": "长城汽车","vCode": "LVSHJCAL8FE384344","carModel": "WEY","type": "PUSH","time": "2020-7-21 17:12:29","isAccess": "否","result": "失败"},
                    {"index": "3","name": "东风汽车","vCode": "LVSHJCAL8FE384344","carModel": "风神","type": "短信","time": "2020-7-21 17:12:29","isAccess": "是","result": "成功"},
                    {"index": "4","name": "吉利汽车","vCode": "LVSHJCAL8FE384344","carModel": "缤越","type": "PUSH","time": "2020-7-21 17:12:29","isAccess": "否","result": "失败"},
                ];
                this.tableData = cData;
            },
            reset () {
                this.queryForm.brand = ''
                this.queryForm.activityId = ''
                this.queryForm.activityStatus = ''
                this.queryForm.activityTitle = ''
                this.queryForm.pageNum = 1
                this.queryForm.pageSize = 10
                this.queryList()
            },
            // 每页显示条数
            pageSizeChange (val) {
                let pages = Math.ceil(this.total / val)
                this.queryForm.pageSize = val
                if (this.queryForm.pageNum > pages) {
                    this.queryForm.pageNum = 1
                }
                this.queryList()
            },
            // 当前页码
            pageCurrentChange (val) {
                this.queryForm.pageNum = val
                this.queryList()
            },
        }
    }
</script>

<style scoped>

</style>
